<template>
  <div class="index">
    <div class="banner">
      <swiper ref="bannerSwiper" :options="swiperOption2" v-if="list.length > 1">
        <swiper-slide class="each-banner" v-for="item in list" :key="item.did">
          <div class="titles">
            <div class="zhu-title" :style="{ color: item.color }">{{ item.title }}</div>
            <div class="fu-title" :style="{ color: item.color2 }">{{ item.title2 }}</div>
          </div>
          <img :src="item.cover" alt />
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
      <div v-else>
        <div class="each-banner" v-for="item in list" :key="item.did">
          <div class="titles">
            <div class="zhu-title" :style="{ color: item.color }">{{ item.title }}</div>
            <div class="fu-title" :style="{ color: item.color2 }">{{ item.title2 }}</div>
          </div>
          <img :src="item.cover" alt />
        </div>
      </div>
    </div>
    <div class="our-serve">
      <transition enter-active-class="wow rubberBand" leave-active-class="wow bounceOut">
        <h1 class="wow animated" data-wow-delay="1.5s" data-wow-duration="1.5s">我们的服务</h1>
      </transition>
      <p>通过有效的价值链运作方式，提升营销竞争力</p>
      <div class="serves">
        <swiper ref="mySwiper" v-if="mobielShow" :options="swiperOption1">
          <swiper-slide>
            <div class="e-serves">
              <div class="e-s-top">
                <img src="../../public/static/fuwu1@2x.png" alt="图片" />
                <p class="title">公关传播</p>
              </div>
              <ul class="ul1">
                <li>· 策略规划</li>
                <li>· 市场调研</li>
                <li>· 品牌年度市场策略与计划</li>
                <li>· 规划整合· 品牌传播</li>
                <li>· 新产品上市推广策略与计划</li>
                <li>· PR发稿· SEO优化</li>
                <li>· 品牌跨界合作策略与规划</li>
                <li>· 媒介策略与执行</li>
                <li>· 深度分析</li>
                <li>· 微博微信运营</li>
              </ul>
              <div class="more" @click="toOtherPage('/Spread')">
                <span>More</span>
                <img src="../../public/static/jiantou-small@2x(1).png" alt="了解更多" />
              </div>
            </div>
          </swiper-slide>
          <swiper-slide>
            <div class="e-serves e-serves1">
              <div class="e-s-top">
                <img src="../../public/static/fuwu2@2x.png" alt="图片" />
                <p class="title">数字化营销</p>
              </div>
              <ul class="ul2">
                <li>· 媒介策略及执行</li>
                <li>· 百度广告投放</li>
                <li>· 腾讯朋友圈投放</li>
                <li>· 今日头条投放</li>
              </ul>
              <div class="more" @click="toOtherPage('/Marketing')">
                <span>More</span>
                <img src="../../public/static/jiantou-small@2x(1).png" alt="了解更多" />
              </div>
            </div>
          </swiper-slide>
          <swiper-slide>
            <div class="e-serves">
              <div class="e-s-top">
                <img src="../../public/static/fuwu3@2x.png" alt="图片" />
                <p class="title">创意设计</p>
              </div>
              <ul class="ul1">
                <li>· 品牌核心策划</li>
                <li>· 品牌LOGO设计</li>
                <li>· 品牌核心创意构建</li>
                <li>· 平面设计&执行</li>
                <li>· 产品/活动主视觉设计</li>
                <li>· 品牌IP形象设计及运营</li>
                <li>· 线上/线下活动策划&执行</li>
                <li>· 包装设计·VI设计</li>
                <li>· TVC脚本撰写&执行</li>
                <li>· 新媒体创意&执行</li>
              </ul>
              <div class="more" @click="toOtherPage('/Design')">
                <span>More</span>
                <img src="../../public/static/jiantou-small@2x(1).png" alt="了解更多" />
              </div>
            </div>
          </swiper-slide>
          <swiper-slide>
            <div class="e-serves e-serves1">
              <div class="e-s-top">
                <img src="../../public/static/fuwu4@2x.png" alt="图片" />
                <p class="title">线下公关</p>
              </div>
              <ul class="ul2">
                <li>· 活动行销</li>
                <li>· 会议/会展</li>
                <li>· 路演/巡演</li>
                <li>· 促销推广</li>
                <li>· 通路营销</li>
                <li>· 直效营销</li>
              </ul>
              <div class="more" @click="toOtherPage('/Offline')">
                <span>More</span>
                <img src="../../public/static/jiantou-small@2x(1).png" alt="了解更多" />
              </div>
            </div>
          </swiper-slide>
          <swiper-slide>
            <div class="e-serves">
              <div class="e-s-top">
                <img src="../../public/static/fuwu5@2x.png" alt="图片" />
                <p class="title">营销工具</p>
              </div>
              <ul class="ul1">
                <li>· 综艺/电视/电影</li>
                <li>· 植入与产品开发</li>
                <li>· 歌曲/音乐会/演唱会定制</li>
                <li>· 规划娱乐传播项目整合</li>
                <li>· 艺人邀约</li>
                <li>· 娱乐媒体合作</li>
              </ul>
              <div class="more" @click="toOtherPage('/Monitor')">
                <span>More</span>
                <img src="../../public/static/jiantou-small@2x(1).png" alt="了解更多" />
              </div>
            </div>
          </swiper-slide>
          <div class="swiper-pagination1" slot="pagination1"></div>
        </swiper>
        <div class="serves-box" v-else>
          <div class="e-serves" @click="toOtherPage('/Spread')">
            <div class="e-s-top">
              <img src="../../public/static/fuwu1@2x.png" alt="图片" />
              <p class="title">公关传播</p>
            </div>
            <ul class="ul1">
              <li>· 策略规划</li>
              <li>· 市场调研</li>
              <li>· 品牌年度市场策略与计划</li>
              <li>· 规划整合· 品牌传播</li>
              <li>· 新产品上市推广策略与计划</li>
              <li>· PR发稿· SEO优化</li>
              <li>· 品牌跨界合作策略与规划</li>
              <li>· 媒介策略与执行</li>
              <li>· 深度分析</li>
              <li>· 微博微信运营</li>
            </ul>
            <div class="more">
              <span>More</span>
              <img src="../../public/static/jiantou-small@2x(1).png" alt="了解更多" />
            </div>
          </div>
          <div class="e-serves e-serves1" @click="toOtherPage('/Marketing')">
            <div class="e-s-top">
              <img src="../../public/static/fuwu2@2x.png" alt="图片" />
              <p class="title">数字化营销</p>
            </div>
            <ul class="ul2">
              <li>· 媒介策略及执行</li>
              <li>· 百度广告投放</li>
              <li>· 腾讯朋友圈投放</li>
              <li>· 今日头条投放</li>
            </ul>
            <div class="more">
              <span>More</span>
              <img src="../../public/static/jiantou-small@2x(1).png" alt="了解更多" />
            </div>
          </div>
          <div class="e-serves" @click="toOtherPage('/Design')">
            <div class="e-s-top">
              <img src="../../public/static/fuwu3@2x.png" alt="图片" />
              <p class="title">创意设计</p>
            </div>
            <ul class="ul1">
              <li>· 品牌核心策划</li>
              <li>· 品牌LOGO设计</li>
              <li>· 品牌核心创意构建</li>
              <li>· 平面设计&执行</li>
              <li>· 产品/活动主视觉设计</li>
              <li>· 品牌IP形象设计及运营</li>
              <li>· 线上/线下活动策划&执行</li>
              <li>· 包装设计·VI设计</li>
              <li>· TVC脚本撰写&执行</li>
              <li>· 新媒体创意&执行</li>
            </ul>
            <div class="more">
              <span>More</span>
              <img src="../../public/static/jiantou-small@2x(1).png" alt="了解更多" />
            </div>
          </div>
          <div class="e-serves e-serves1" @click="toOtherPage('/Offline')">
            <div class="e-s-top">
              <img src="../../public/static/fuwu4@2x.png" alt="图片" />
              <p class="title">线下公关</p>
            </div>
            <ul class="ul2">
              <li>· 活动行销</li>
              <li>· 会议/会展</li>
              <li>· 路演/巡演</li>
              <li>· 促销推广</li>
              <li>· 通路营销</li>
              <li>· 直效营销</li>
            </ul>
            <div class="more">
              <span>More</span>
              <img src="../../public/static/jiantou-small@2x(1).png" alt="了解更多" />
            </div>
          </div>
          <div class="e-serves" @click="toOtherPage('/Monitor')">
            <div class="e-s-top">
              <img src="../../public/static/fuwu5@2x.png" alt="图片" />
              <p class="title">营销工具</p>
            </div>
            <ul class="ul1">
              <li>· 综艺/电视/电影</li>
              <li>· 植入与产品开发</li>
              <li>· 歌曲/音乐会/演唱会定制</li>
              <li>· 规划娱乐传播项目整合</li>
              <li>· 艺人邀约</li>
              <li>· 娱乐媒体合作</li>
            </ul>
            <div class="more">
              <span>More</span>
              <img src="../../public/static/jiantou-small@2x(1).png" alt="了解更多" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="con-serve">
      <h1 class="wow animated fadeIn" data-wow-duration="0.5s">客户服务案例</h1>
      <p>覆盖装修、汽车、金融、家居，服装等10大领域</p>
      <div class="carousel carousel1">
        <swiper ref="conServe" :options="swiperOption2">
          <swiper-slide>
            <div class="each">
              <img src="../../public/static/tu1@2x.png" alt />
              <img src="../../public/static/tu2@2x.png" alt />
              <img src="../../public/static/tu3@2x.png" alt />
              <img src="../../public/static/tu4@2x.png" alt />
              <img src="../../public/static/tu5@2x.png" alt />
              <img src="../../public/static/tu6@2x.png" alt />
              <img src="../../public/static/tu7@2x.png" alt />
              <img src="../../public/static/tu8@2x.png" alt />
              <img src="../../public/static/tu9@2x.png" alt />
              <img src="../../public/static/tu10@2x.png" alt />
              <img src="../../public/static/tu12@2x.png" alt />
              <img src="../../public/static/tu13@2x.png" alt />
              <img src="../../public/static/tu14@2x.png" alt />
              <img src="../../public/static/tu15@2x.png" alt />
              <img src="../../public/static/tu16@2x.png" alt />
              <img src="../../public/static/tu17@2x.png" alt />
              <img src="../../public/static/tu18@2x.png" alt />
              <img src="../../public/static/tu19@2x.png" alt />
              <img src="../../public/static/tu20@2x.png" alt />
              <img src="../../public/static/tu21@2x.png" alt />
              <img src="../../public/static/tu22@2x.png" alt />
              <img src="../../public/static/tu23@2x.png" alt />
              <img src="../../public/static/tu24@2x.png" alt />
              <img src="../../public/static/tu25@2x.png" alt />
              <img src="../../public/static/tu26@2x.png" alt />
              <img src="../../public/static/tu27@2x.png" alt />
              <img src="../../public/static/tu28@2x.png" alt />
              <img src="../../public/static/tu29@2x.png" alt />
              <img src="../../public/static/tu30@2x.png" alt />
              <img src="../../public/static/tu31@2x.png" alt />
              <img src="../../public/static/tu32@2x.png" alt />
              <img src="../../public/static/tu33@2x.png" alt />
              <img src="../../public/static/tu34@2x.png" alt />
              <img src="../../public/static/tu35@2x.png" alt />
              <img src="../../public/static/tu36@2x.png" alt />
            </div>
          </swiper-slide>
          <swiper-slide>
            <div class="each">
              <img src="../../public/static/tu1@2x.png" alt />
              <img src="../../public/static/tu2@2x.png" alt />
              <img src="../../public/static/tu3@2x.png" alt />
              <img src="../../public/static/tu4@2x.png" alt />
              <img src="../../public/static/tu5@2x.png" alt />
              <img src="../../public/static/tu6@2x.png" alt />
              <img src="../../public/static/tu7@2x.png" alt />
              <img src="../../public/static/tu8@2x.png" alt />
              <img src="../../public/static/tu9@2x.png" alt />
              <img src="../../public/static/tu10@2x.png" alt />
              <img src="../../public/static/tu12@2x.png" alt />
              <img src="../../public/static/tu13@2x.png" alt />
              <img src="../../public/static/tu14@2x.png" alt />
              <img src="../../public/static/tu15@2x.png" alt />
              <img src="../../public/static/tu16@2x.png" alt />
              <img src="../../public/static/tu17@2x.png" alt />
              <img src="../../public/static/tu18@2x.png" alt />
              <img src="../../public/static/tu19@2x.png" alt />
              <img src="../../public/static/tu20@2x.png" alt />
              <img src="../../public/static/tu21@2x.png" alt />
              <img src="../../public/static/tu22@2x.png" alt />
              <img src="../../public/static/tu23@2x.png" alt />
              <img src="../../public/static/tu24@2x.png" alt />
              <img src="../../public/static/tu25@2x.png" alt />
              <img src="../../public/static/tu26@2x.png" alt />
              <img src="../../public/static/tu27@2x.png" alt />
              <img src="../../public/static/tu28@2x.png" alt />
              <img src="../../public/static/tu29@2x.png" alt />
              <img src="../../public/static/tu30@2x.png" alt />
              <img src="../../public/static/tu31@2x.png" alt />
              <img src="../../public/static/tu32@2x.png" alt />
              <img src="../../public/static/tu33@2x.png" alt />
              <img src="../../public/static/tu34@2x.png" alt />
              <img src="../../public/static/tu35@2x.png" alt />
              <img src="../../public/static/tu36@2x.png" alt />
            </div>
          </swiper-slide>
          <swiper-slide>
            <div class="each">
              <img src="../../public/static/tu1@2x.png" alt />
              <img src="../../public/static/tu2@2x.png" alt />
              <img src="../../public/static/tu3@2x.png" alt />
              <img src="../../public/static/tu4@2x.png" alt />
              <img src="../../public/static/tu5@2x.png" alt />
              <img src="../../public/static/tu6@2x.png" alt />
              <img src="../../public/static/tu7@2x.png" alt />
              <img src="../../public/static/tu8@2x.png" alt />
              <img src="../../public/static/tu9@2x.png" alt />
              <img src="../../public/static/tu10@2x.png" alt />
              <img src="../../public/static/tu12@2x.png" alt />
              <img src="../../public/static/tu13@2x.png" alt />
              <img src="../../public/static/tu14@2x.png" alt />
              <img src="../../public/static/tu15@2x.png" alt />
              <img src="../../public/static/tu16@2x.png" alt />
              <img src="../../public/static/tu17@2x.png" alt />
              <img src="../../public/static/tu18@2x.png" alt />
              <img src="../../public/static/tu19@2x.png" alt />
              <img src="../../public/static/tu20@2x.png" alt />
              <img src="../../public/static/tu21@2x.png" alt />
              <img src="../../public/static/tu22@2x.png" alt />
              <img src="../../public/static/tu23@2x.png" alt />
              <img src="../../public/static/tu24@2x.png" alt />
              <img src="../../public/static/tu25@2x.png" alt />
              <img src="../../public/static/tu26@2x.png" alt />
              <img src="../../public/static/tu27@2x.png" alt />
              <img src="../../public/static/tu28@2x.png" alt />
              <img src="../../public/static/tu29@2x.png" alt />
              <img src="../../public/static/tu30@2x.png" alt />
              <img src="../../public/static/tu31@2x.png" alt />
              <img src="../../public/static/tu32@2x.png" alt />
              <img src="../../public/static/tu33@2x.png" alt />
              <img src="../../public/static/tu34@2x.png" alt />
              <img src="../../public/static/tu35@2x.png" alt />
              <img src="../../public/static/tu36@2x.png" alt />
            </div>
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </div>
      <div class="carousel carousel2">
        <swiper ref="conServe1" :options="swiperOption2">
          <swiper-slide>
            <div class="each">
              <img src="../../public/static/tu1@2x.png" alt />
              <img src="../../public/static/tu2@2x.png" alt />
              <img src="../../public/static/tu3@2x.png" alt />
              <img src="../../public/static/tu4@2x.png" alt />
              <img src="../../public/static/tu5@2x.png" alt />
              <img src="../../public/static/tu6@2x.png" alt />
              <img src="../../public/static/tu7@2x.png" alt />
              <img src="../../public/static/tu8@2x.png" alt />
              <img src="../../public/static/tu9@2x.png" alt />
              <img src="../../public/static/tu10@2x.png" alt />
              <img src="../../public/static/tu12@2x.png" alt />
              <img src="../../public/static/tu13@2x.png" alt />
              <img src="../../public/static/tu14@2x.png" alt />
              <img src="../../public/static/tu15@2x.png" alt />
              <img src="../../public/static/tu16@2x.png" alt />
            </div>
          </swiper-slide>
          <swiper-slide>
            <div class="each">
              <img src="../../public/static/tu22@2x.png" alt />
              <img src="../../public/static/tu23@2x.png" alt />
              <img src="../../public/static/tu24@2x.png" alt />
              <img src="../../public/static/tu25@2x.png" alt />
              <img src="../../public/static/tu26@2x.png" alt />
              <img src="../../public/static/tu27@2x.png" alt />
              <img src="../../public/static/tu28@2x.png" alt />
              <img src="../../public/static/tu29@2x.png" alt />
              <img src="../../public/static/tu30@2x.png" alt />
              <img src="../../public/static/tu31@2x.png" alt />
              <img src="../../public/static/tu32@2x.png" alt />
              <img src="../../public/static/tu33@2x.png" alt />
              <img src="../../public/static/tu34@2x.png" alt />
              <img src="../../public/static/tu35@2x.png" alt />
              <img src="../../public/static/tu36@2x.png" alt />
            </div>
          </swiper-slide>
          <swiper-slide>
            <div class="each">
              <img src="../../public/static/tu1@2x.png" alt />
              <img src="../../public/static/tu2@2x.png" alt />
              <img src="../../public/static/tu3@2x.png" alt />
              <img src="../../public/static/tu4@2x.png" alt />
              <img src="../../public/static/tu5@2x.png" alt />
              <img src="../../public/static/tu6@2x.png" alt />
              <img src="../../public/static/tu7@2x.png" alt />
              <img src="../../public/static/tu8@2x.png" alt />
              <img src="../../public/static/tu9@2x.png" alt />
              <img src="../../public/static/tu10@2x.png" alt />
              <img src="../../public/static/tu32@2x.png" alt />
              <img src="../../public/static/tu33@2x.png" alt />
              <img src="../../public/static/tu34@2x.png" alt />
              <img src="../../public/static/tu35@2x.png" alt />
              <img src="../../public/static/tu36@2x.png" alt />
            </div>
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </div>
    </div>
    <div class="news" v-if="newsList.length">
      <h1>新闻中心</h1>
      <p>我们对数字化工作充满热情，并希望与其他人分享我们的知识，以便您在线上取得成功。</p>
      <div v-if="mobielShow">
        <swiper ref="mySwiper1" :options="swiperOption">
          <swiper-slide class="each-news" v-for="item in newsList" :key="item.did">
            <div @click="toDetail(item.did)">
              <div class="cover">
                <img :src="item.cover" alt="图片" />
              </div>
              <div class="time">{{ formatter(item.createTime) }}</div>
              <div class="title">{{ item.title }}</div>
              <div class="brief">{{ item.summary }}</div>
              <div class="more">More</div>
            </div>
          </swiper-slide>
        </swiper>
      </div>
      <div class="news-box" v-else>
        <div class="each-news" v-for="item in newsList" :key="item.did" @click="toDetail(item.did)">
          <div class="cover">
            <img :src="item.cover" alt="图片" />
          </div>
          <div class="time">{{ formatter(item.createTime) }}</div>
          <div class="title">{{ item.title }}</div>
          <div class="brief">{{ item.summary }}</div>
          <div class="more">More</div>
        </div>
      </div>
      <div class="show-more" @click="toOtherPage('/NewsList')">
        <span>More</span>
        <img src="../../public/static/jiantou-big.png" alt="了解更多" />
      </div>
    </div>
    <MyForm></MyForm>
  </div>
</template>

<script>
import { WOW } from "wowjs";
import MyForm from "../components/myForm";
export default {
  name: "Index",
  components: { MyForm },
  data() {
    return {
      list: [],
      newsList: [],
      height: "",
      height1: "",
      mobielShow: false,
      swiperOption1: {
        slidesPerView: 2.5,
        spaceBetween: 10,
        freeMode: true,
        pagination: {
          el: ".swiper-pagination1",
          clickable: true
        }
      },
      swiperOption: {
        slidesPerView: "auto",
        spaceBetween: 30,
        freeMode: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true
        }
      },
      swiperOption2: {
        spaceBetween: 0,
        loop: true,
        centeredSlides: true,
        autoplay: {
          delay: 6000,
          disableOnInteraction: false
        },
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        pagination: {
          el: ".swiper-pagination",
          clickable: true
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        }
      },
      swiperOption3: {
        spaceBetween: 0,
        loop: true,
        centeredSlides: true,
        autoplay: {
          delay: 2000,
          disableOnInteraction: false
        },
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        pagination: {
          el: ".swiper-pagination",
          clickable: true
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        }
      }
    };
  },
  methods: {
    //时间搓处理
    formatter(dates) {
      if (dates == "0") {
        return "-";
      } else {
        var date = new Date(dates);
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        m = m < 10 ? "0" + m : m;
        var d = date.getDate();
        d = d < 10 ? "0" + d : d;
        let hour = date.getHours();
        if (hour < 10) {
          hour = "0" + hour;
        }
        let minute = date.getMinutes();
        if (minute < 10) {
          minute = "0" + minute;
        }
        let second = date.getSeconds();
        if (second < 10) {
          second = "0" + second;
        }
        return y + "-" + m + "-" + d + "\xa0 ";
      }
    },
    toOtherPage(path) {
      this.$router.push(path);
    },
    getCarouselsList() {
      this.$post("/v1/carousel/list").then(res => {
        if (res.code == 200) {
          const { data } = res;
          this.list = data.carousels;
        }
      });
    },
    getNewsList() {
      this.$post("/v1/news/list", { page: 1, pageSize: 3 }).then(res => {
        if (res.code == 200) {
          const { data } = res;
          this.newsList = data.news;
        }
      });
    },
    //跳转详情
    toDetail(did) {
      this.$router.push({
        path: "/NewsDetail",
        query: {
          did: did
        }
      });
    }
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper;
    }
  },
  created() {
    this.getCarouselsList();
    this.getNewsList();
  },
  mounted() {
    var winWidth = window.innerWidth;
    if (winWidth > 1000) {
      this.height = "10.64rem";
      this.height1 = "6.86rem";
      this.mobielShow = false;
    } else {
      this.height = "5.78rem";
      this.height1 = "6.36rem";
      this.mobielShow = true;
    }
    this.$parent.setNav(1, 0);
    this.$nextTick(() => {
      // 在dom渲染完后,再执行动画
      const wow = new WOW({
        live: false
      });
      wow.init();
    });
  }
};
</script>
<style lang="less" scoped>
.index {
  .banner {
    height: 10.64rem;
    .each-banner {
      height: 10.64rem;
      position: relative;
      .titles {
        position: absolute;
        width: 100%;
        height: 100%;
        // z-index: 11;
        top: 0;
        left: 0;
        padding-top: 3.9rem;
        box-sizing: border-box;
        text-align: center;
        .zhu-title {
          margin-bottom: 0.3rem;
          font-size: 0.6rem;
          font-weight: 600;
        }
        .fu-title {
          font-size: 0.36rem;
        }
      }
      img {
        width: 100%;
        height: 100%;
      }
    }
    // /deep/ .el-carousel__item {
    //   color: #475669;
    //   font-size: 14px;
    //   opacity: 0.75;
    //   height: 10.64rem;
    //   margin: 0;
    // }
    // img {
    //   width: 100%;
    //   height: 100%;
    // }
  }
  .our-serve {
    height: 11.26rem;
    background-image: url("../../public/static/kefubg@2x.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding-top: 1.04rem;
    > h1 {
      color: #fff;
      font-size: 0.36rem;
      text-align: center;
      font-weight: 700;
      margin-bottom: 0.22rem;
    }
    > p {
      color: #fff;
      font-size: 0.18rem;
      text-align: center;
    }
    .serves {
      display: flex;
      justify-content: center;
    }
    .serves-box {
      // width: 15.2rem;
      margin: 0 auto;
      padding-top: 1.04rem;
      box-sizing: border-box;
      display: flex;
    }
    .e-serves {
      text-align: center;
      padding: 0.44rem 0 0.56rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 4rem;
      flex-shrink: 0;
      height: 7.2rem;
      background: #171949;
      position: relative;
      cursor: pointer;
      .e-s-top {
        img {
          width: 1.3rem;
          height: 1rem;
          vertical-align: middle;
          margin-bottom: 0.26rem;
        }
        .title {
          font-size: 0.24rem;
          color: #fff;
        }
      }
      ul {
        flex: 1;
        font-size: 0.2rem;
        color: #fff;
        line-height: 0.4rem;
        text-align: left;
        margin-top: 0.57rem;
      }
      .more {
        cursor: pointer;
        position: absolute;
        bottom: 0.3rem;
        left: 50%;
        transform: translate(-50%);
        font-size: 0.2rem;
        color: #fff;
        display: flex;
        align-items: center;
        width: 1.22rem;
        height: 0.32rem;
        border: 1px solid #fff;
        border-radius: 0.16rem;
        margin: 0 auto;
        text-align: center;
        justify-content: space-around;
        img {
          width: 0.3rem;
          height: 0.09rem;
        }
      }
      .ul1 {
        padding: 0 0.46rem;
      }
    }
    .e-serves1 {
      background: #1a72e6;
      .ul2 {
        padding: 0 0.46rem;
      }
    }
  }
  .con-serve {
    color: #000;
    text-align: center;
    height: 10.26rem;
    background-image: url("../../public/static/logobg@2x.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding-top: 1.04rem;
    > h1 {
      font-size: 0.36rem;
      font-weight: 700;
      margin-bottom: 0.18rem;
    }
    > p {
      font-size: 0.18rem;
      margin-bottom: 0.5rem;
    }
    .each {
      width: 20rem;
      height: 6.86rem;
      margin: 0.6rem auto;
      background: #ffffff;
      box-shadow: 0px 0px 0.41rem 0.31rem rgba(2, 16, 203, 0.17);

      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 0.1rem;
      > img {
        flex-shrink: 0;
        width: 2rem;
        height: 1rem;
        vertical-align: middle;
        margin-top: 0.26rem;
      }
    }
  }
  .carousel2 {
    display: none;
  }
  .carousel1 {
    display: block;
  }
  .news {
    padding-top: 1.04rem;
    margin-bottom: 1.44rem;
    text-align: center;
    > h1 {
      font-size: 0.36rem;
      font-weight: 700;
      margin-bottom: 0.18rem;
    }
    > p {
      font-size: 0.18rem;
      margin-bottom: 0.7rem;
    }
    .news-box {
      width: 15.2rem;
      margin: 0 auto 1.15rem;
      display: flex;
      justify-content: space-between;
    }
    .each-news {
      padding: 0.2rem 0.2rem 0.8rem;
      width: 4.76rem;
      box-sizing: border-box;
      text-align: left;
      background: #eff7fe;
      position: relative;
      height: 6.5rem;

      cursor: pointer;
      &:hover {
        background: #1a72e6;
      }
      &:hover .title {
        color: #fff;
      }
      &:hover .time {
        color: #fff;
      }
      &:hover .brief {
        color: #fff;
      }
      &:hover .more {
        color: #fff;
      }
      .cover {
        width: 4.4rem;
        height: 3rem;
        margin-bottom: 0.5rem;
        img {
          width: 100%;
          height: 100%;
          vertical-align: middle;
        }
      }
      .time {
        font-size: 0.18rem;
      }
      .title {
        font-size: 0.24rem;
        // font-weight: 600;
        margin: 0.18rem 0 0.18rem;
        line-height: 0.4rem;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .brief {
        color: #828282;
        font-size: 0.18rem;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        line-height: 0.32rem;
      }
      .more {
        position: absolute;
        bottom: 0.2rem;
        right: 0.2rem;
        text-align: right;
        font-size: 0.18rem;
        margin-top: 0.86rem;
      }
    }
    .show-more {
      cursor: pointer;
      font-size: 0.18rem;
      color: #000;
      display: flex;
      align-items: center;
      width: 2.12rem;
      height: 0.56rem;
      border: 1px solid #000;
      border-radius: 0.28rem;
      margin: 0 auto;
      text-align: center;
      justify-content: space-around;
      img {
        width: 0.49rem;
        height: 0.09rem;
      }
    }
  }
  /deep/.swiper-pagination-bullet {
    width: 24px;
    height: 4px;
    border-radius: 4px;
  }
}
@media screen and (max-width: 1400px) {
  .index {
    .our-serve {
      .e-serves {
        width: 4rem;
      }
    }
    .con-serve {
      .each {
        width: 20rem;
      }
    }
  }
}
@media screen and (max-width: 1000px) {
  .index {
    .banner {
      height: 4rem;
      .each-banner {
        height: 4rem;
        .titles {
          padding-top: 1.4rem;
          box-sizing: border-box;
          text-align: center;
          .zhu-title {
            margin-bottom: 0.1rem;
            font-size: 0.36rem;
            font-weight: 600;
          }
          .fu-title {
            font-size: 0.24rem;
          }
        }
      }
      // .el-carousel__item {
      //   height: 100%;
      // }
    }
    .our-serve {
      > p {
        margin-bottom: 0.7rem;
      }
      .serves-box {
        .swiper-slide {
          width: 3.2rem;
          height: 7rem;
        }
        .e-serves {
          width: 3.2rem;
          height: 7rem;
          // flex-shrink: 0;
        }
      }
      .e-serves {
        width: 3.2rem;
        ul {
          font-size: 0.18rem;
        }
      }
    }
    .con-serve {
      height: 8.89rem;
      .each {
        width: 6.67rem;
      }
    }
    .news {
      margin-bottom: 0.6rem;

      > p {
        padding: 0 0.2rem;
        line-height: 0.36rem;
      }
      .news-box {
        width: 100%;
        .each-news {
          width: 4.76rem !important;
        }
      }
      .show-more {
        margin-top: 0.8rem;
      }
    }
    .carousel1 {
      display: none;
    }
    .carousel2 {
      display: block;
    }
  }
}

@media screen and (max-width: 1000px) {
  .index {
    .our-serve {
      .e-serves {
        padding: 0.44rem 0 1.26rem;
        // width: 4rem;
      }
    }
  }
}
</style>

